<template>
    <div class="goods">
      <router-link :to="'/home/gooddetail/' + item.id" tag="div" class="goods_list" v-for="(item,index) in goodlist" :key="index">
        <img :src="item.img_url" alt="" class="goods_list_img">
        <div class="good_title">{{item.title}}</div>
        <div class="good_number">
          <div class="good_money">￥{{item.sell_price}}</div>
          <div class="good_ymoney">￥{{item.market_price}}</div>
        </div>
        <div class="good_footer">
          <div class="good_footer_left">热卖中</div>
          <div class="good_footer_right">剩{{item.stock_quantity}}件</div>
        </div>
      </router-link>
    </div>
</template>

<script>
export default {
  name:'goodlist',
  data(){
    return{
      goodlist:[]
    }
  },
  methods:{
    getlist(){
        this.$axios.get('http://www.liulongbin.top:3005/api/getgoods?pageindex=' + 1 ).then(res => {
          console.log(res);
          if(res.data.status == 0){
            this.goodlist = res.data.message;
          }
        })
    }
    
  },
  created(){
    this.getlist();
  }
}
</script>

<style scoped>
  .goods{
    width:100%;
    padding:0 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-wrap: wrap;
  }
  .goods_list{
    width:calc(50% - 5px);
    margin-right:10px;
    border:1px solid #e2e2e2;
    margin-top:10px;
    box-sizing: border-box;
  }
  .goods_list:nth-child(2n){
    margin-right:0;
  }
  .goods_list_img{
    width:100%;
    height: 100px;
  }
  .good_title{
    font-size:12px;
    background-color: #FFF;
    color:#333;
  }
  .good_number{
    display: flex;
    flex-direction: row;
    margin-top:5px;
    padding:0 5px;
    box-sizing: border-box;
  }
  .good_money{
    color:red;
    font-size:12px;
  }
  .good_ymoney{
    font-size:12px;
    margin-left:10px;
    font-size:10px;
    text-decoration: line-through;
    color:#999;
  }
  .good_footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top:5px;
    padding:0 5px;
    box-sizing: border-box;
    font-size:12px;
    margin-bottom:5px;
    color:#333;
  }
</style>